<template>
  <div style="z-index: 99">
    <div class="myStyle"  :class="[isTop===false&&dayModel===true?'lColor':'',dayModel===false?'bColor':'']">
      <div class="MenuStyle">
        <div class="el-icon-menu" @click="drawer= true"></div>
      </div>
      <div class="MenuStyle" style="right: 30px;">
        <div @click="changeModel"  :class="dayModel===true?'icon-moon':'icon-sun'" class="iconfont"></div>
      </div>
    </div>

    <div class="MyFixed" :class="[dayModel===true?'lColor':'bColor']">
      <el-drawer title="菜单" v-model="drawer" :direction="direction" destroy-on-close size="50%" >
        <div class="my-margin-lr">
          <a href="/" class="myA" :class="[dayModel===true?'bFColor':'lFColor',routerName==='index'?'active-link':'']">首页</a>
        </div>
        <div class="my-margin-lr my-margin-t">
          <a href="/type" class="myA" :class="[dayModel===true?'bFColor':'lFColor',routerName==='type'?'active-link':'']">分类</a>
        </div>
        <div class="my-margin-lr my-margin-t">
          <a href="/tag" class="myA" :class="[dayModel===true?'bFColor':'lFColor',routerName==='tag'?'active-link':'']">标签</a>
        </div>
        <div class="my-margin-lr my-margin-t">
          <a href="/archive" class="myA" :class="[dayModel===true?'bFColor':'lFColor',routerName==='archive'?'active-link':'']">归档</a>
        </div>
        <div class="my-margin-lr my-margin-t">
          <a href="/friendLink" class="myA" :class="[dayModel===true?'bFColor':'lFColor',routerName==='friendLink'?'active-link':'']">友链</a>
        </div>
        <div style="width: 150px" class="my-margin-t my-margin-lr">
          <el-autocomplete @select="handleSelect" v-model="searchInfo" :fetch-suggestions="querySearch" prefix-icon="el-icon-search" style="border-radius: 10px;width: 150px"></el-autocomplete>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "PMenu",
  data() {
    return {
      drawer: false,
      direction: 'ltr',
      searchInfo: '',
      isTop: true
    }
  },
  mounted() {
    window.addEventListener("scroll",this.handleScrollx,true)
    this.loadAll();
  },
  computed: {
    dayModel(){
      return this.$store.state.dayModel;
    },
    routerName(){
      return this.$store.state.routerName;
    }
  },
  methods: {
    querySearch(queryString,cb) {
      var blogInfo = this.blogInfo;
      var results = queryString ? blogInfo.filter(this.createFilter(queryString)) : blogInfo;
      cb(results)
    },
    createFilter(queryString) {
      return (blogInfo) => {
        return (
            blogInfo.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1
        );
      };
    },
    loadAll(){
      axios.get("/searchAllInfo").then( (res) => {
        let blogs = res.data;
        let blogtitle = [];
        for ( let item of blogs){
          blogtitle.push({'value':item.title,'id':item.id})
        }
        this.blogInfo = blogtitle;
      })
    },
    handleSelect(item){
      console.log(item)
    },
    myMethod(){
      this.bigInput = !this.bigInput;
    },
    changeModel() {
      let dayModel = !this.dayModel;
      this.$store.commit("setDayModel",dayModel);
    },
    handleScrollx() {
      if ( window.pageYOffset == 0){
        this.isTop = true;
      }
      else {
        this.isTop = false;
      }
    }
  }
}
</script>

<style scoped>
.active-link {
  color: #00df12 !important;
}
.myStyle {
  position: fixed;
  top: 0;
  line-height: 30px;
  transition: all .5s linear;
  width: 100rem;
  height: 60px
}
.bColor >>> div {
  background-color: #171d20;
}
.bFColor {
  color: black;
}
.lFColor {
  color: white;
}
.lColor >> div {
  background-color: white;
}
.lColor {
  background-color: white;
}
.bColor {
  background-color: #171d20;
}
.my-margin-t {
  padding-top: 10px;
}

.my-margin-lr {
  margin: 0 20px;
}
.myA {
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
}
.MyFixed {
  position: fixed;
  z-index: 9;
}
.MenuStyle {
  color: gray;
  margin: 1rem 0 0 1.5rem;
  font-size: 20px;
  position: fixed;
}
</style>